<template>
  <input
    :type="type"
    :name="name"
    :value="modelValue"
    :disabled="disabled"
    :placeholder="placeholder"
    :class="{ 'layui-disabled': disabled }"
    class="layui-input"
    @input="onInput"
    @focus="onFocus"
    @blur="onBlur"
  />
</template>

<script setup name="LayInput" lang="ts">
import { defineProps, defineEmits } from "vue";

export interface LayInputProps {
  name?: string;
  type?: string;
  disabled?: boolean;
  modelValue?: string;
  placeholder?: string;
}

const props = defineProps<LayInputProps>();

const emit = defineEmits(["update:modelValue", "input", "focus", "blur"]);

const onInput = function (event: InputEvent) {
  const inputElement = event.target as HTMLInputElement;
  emit("update:modelValue", inputElement.value);
  emit("input", event);
};

const onFocus = function (event: FocusEvent) {
  emit("focus", event);
};

const onBlur = function () {
  emit("blur");
};
</script>
